<!DOCTYPE html>
<html>

<head>
    <title>Sample document 3</title>
    <style media="screen">
        #demo-table {
            font: 100% sans-serif;
            background-color: #efe;
            border-collapse: collapse;
            empty-cells: show;
            border: 1px solid #7a7;
        }

        #demo-table> caption {
            text-align: left;
            font-weight: bold;
            font-size: 200%;
            border-bottom: .2em solid #4ca;
            margin-bottom: .5em;
        }
        /* basic shared rules */

        #demo-table th,
        #demo-table td {
            text-align: right;
            padding-right: .5em;
        }

        #demo-table th {
            font-weight: bold;
            padding-left: .5em;
        }
        /* header */

        #demo-table> thead> tr:first-child> th {
            text-align: center;
            color: blue;
        }

        #demo-table> thead> tr+ tr> th {
            font-style: italic;
            color: gray;
        }
        /* fix size of superscript */

        #demo-table sup {
            font-size: 75%;
        }
        /* body */

        #demo-table td {
            background-color: #cef;
            padding: .5em .5em .5em 3em;
        }

        #demo-table tbody th:after {
            content: ":";
        }
        /* footer */

        #demo-table tfoot {
            font-weight: bold;
        }

        #demo-table tfoot th {
            color: blue;
        }

        #demo-table tfoot th:after {
            content: ":";
        }

        #demo-table> tfoot td {
            background-color: #cee;
        }

        #demo-table> tfoot> tr:first-child td {
            border-top: .2em solid #7a7;
        }
    </style>
</head>

<body>
    <table id="demo-table">
        <caption>Oceans</caption>
        <thead>
            <tr>
                <th></th>
                <th>Area</th>
                <th>Mean depth</th>
            </tr>
            <tr>
                <th></th>
                <th>million km<sup>2</sup></th>
                <th>m</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Arctic</th>
                <td>13,000</td>
                <td>1,200</td>
            </tr>
            <tr>
                <th>Atlantic</th>
                <td>87,000</td>
                <td>3,900</td>
            </tr>
            <tr>
                <th>Pacific</th>
                <td>180,000</td>
                <td>4,000</td>
            </tr>
            <tr>
                <th>Indian</th>
                <td>75,000</td>
                <td>3,900</td>
            </tr>
            <tr>
                <th>Southern</th>
                <td>20,000</td>
                <td>4,500</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Total</th>
                <td>361,000</td>
                <td></td>
            </tr>
            <tr>
                <th>Mean</th>
                <td>72,000</td>
                <td>3,800</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>
